<!--  -->
<template>
    <div class="f">
        <div class="bg-gradient-to-br from-gray-600 to-black" style="height: 100vh; width: 100vw;position: relative;">
            <div class="s"
                style="border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-right:5px solid #8f0707;"
                v-bind:class="{ xx: 60 - v == s }" v-for="(v) in 60" :key="v" v-bind:style="{
                    transform:
                        'translate(' +
                        xc(sr, v + s, 60) +
                        'px,' +
                        yc(sr, v + s, 60) +
                        'px) rotate(' +
                        dg(v + s, 60) +
                        'deg)'
                }" v-html="zh(60 - v, 1) + '秒'">

            </div>

            <div class="i" style="border-left:5px solid #8f0707;border-right:5px solid #8f0707;" v-for="(v) in 60" :key="v"
                v-bind:class="{ xx: 60 - v == i }" v-bind:style="{
                    transform:
                        'translate(' +
                        xc(ir, v + i, 60) +
                        'px,' +
                        yc(ir, v + i, 60) +
                        'px) rotate(' +
                        dg(v + i, 60) +
                        'deg)'
                }" v-html="zh(60 - v, 1) + '分'">

            </div>

            <div class="h" v-for="(v) in 24" v-bind:class="{ xx: 24 - v == h }" :key="v" style="" v-bind:style="{
                transform:
                    'translate(' +
                    xc(hr, v + h, 24) +
                    'px,' +
                    yc(hr, v + h, 24) +
                    'px) rotate(' +
                    dg(v + h, 24) +
                    'deg)'
            }" v-html="zh(24 - v, 1) + '时'">

            </div>

            <div class="w" v-for="(v) in 7" v-bind:class="{ xx: 7 - v == w }" :key="v" v-bind:style="{
                transform:
                    'translate(' +
                    xc(wr, v + w, 7) +
                    'px,' +
                    yc(wr, v + w, 7) +
                    'px) rotate(' +
                    dg(v + w, 7) +
                    'deg)'
            }">
                星期{{ wk[7 - v] }}
            </div>

            <div class="d" v-for="(v, k) in 31" v-bind:class="{ xx: 31 - k == dd }" style="border-right:5px solid #8f0707;"
                :key="v" v-bind:style="{
                    transform:
                        'translate(' +
                        xc(dr, k + dd, 31) +
                        'px,' +
                        yc(dr, k + dd, 31) +
                        'px) rotate(' +
                        dg(k + dd, 31) +
                        'deg)'
                }" v-html="zh(31 - k, 1) + '日'">

            </div>

            <div class="m" v-for="(v, k) in  12 " v-bind:class="{ xx: 12 - k == m + 1 }" :key="v"
                style="border-right:5px solid #8f0707;" v-bind:style="{
                    transform:
                        'translate(' +
                        xc(mr, k + m + 1, 12) +
                        'px,' +
                        yc(mr, k + m + 1, 12) +
                        'px) rotate(' +
                        dg(k + m + 1, 12) +
                        'deg)'
                }" v-html="zh(12 - k, 1) + '月'">

            </div>

            <!-- <div class="y">{{ y }}年</div> -->
            <div data-tauri-drag-region id="太极-wrapper" @click="closeWin">
                <div id="太极">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>

            </div>
        </div>

        <div data-tauri-drag-region class="absolute top-0 left-0">

            <div v-if="hl"
                class="text-center text-cyan-500 mt-2 border-cyan-400 border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                {{ hl.ganZhi }}
            </div>

            <div v-if="hl"
                class="text-center text-yellow-500 mt-2 border-yellow-400 border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                {{ hl.naYin }}
            </div>




            <div v-if="hl"
                class="text-center text-purple-500 mt-2 border-purple-400 border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                {{ hl.pengZu }}
                <el-divider border-style="dashed" style="margin: 0px;"></el-divider>
                <span v-html="insertNewLines(hl.xiu[3])" class="text-sm"></span>
            </div>
            <el-row>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        四方:{{ hl.siGong }}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        星宿:{{ hl.xiu[0] + '-' + hl.xiu[2] }}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        四神:{{ hl.siShen }}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        七政:{{ hl.qiZheng }}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        月相:{{ hl.yueXiang }}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        值星:{{ hl.zhiXing }}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        禄:{{ hl.lu }}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        生肖:{{ hl.shengXiao }}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        六耀:{{ hl.liuYao }}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        旬空-年:{{ hl.xunKong[0] }}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        旬空-月:{{ hl.xunKong[1] }}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        旬空-日:{{ hl.xunKong[2] }}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        天神:{{ hl.tianShen[0] }}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        时神:{{ hl.tianShen[1] }}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        {{ hl.chongSha[0] }}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        {{ hl.chongSha[1] }}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        {{ hl.chongSha[2] }}
                    </div>
                </el-col>
                <el-col :span="12">
                    <div v-if="hl"
                        class="text-center text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        {{ hl.chongSha[3] }}
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div v-if="hl"
                        style="width: 10vw; height: 8vh; overflow: auto;margin-top:0.5vh; border-top-right-radius: 8px;border-bottom-left-radius: 8px;"
                        class="w-56 text-left text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        <!-- 吉星: {{ hl.jiShenXiongSha[0] }} -->
                        <el-tag type="info" effect="dark" v-for="(o) in hl.jiShenXiongSha[0]" v-bind:key="o" class="m-0.5">
                            {{
                                o }}
                        </el-tag>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div v-if="hl"
                        style="width: 10vw; height: 8vh; overflow: auto;margin-top:0.5vh; border-top-right-radius: 8px;border-bottom-left-radius: 8px;"
                        class="text-left text-white mt-2 border-white border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
                        <el-tag type="info" effect="dark" v-for="(o) in hl.jiShenXiongSha[1]" v-bind:key="o" class="m-0.5">
                            {{
                                o }}
                        </el-tag>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="absolute right-0 top-0">
            <el-row>
                <el-col :span="8">
                    <div v-if="hl"
                        class="border-yellow-400 border-2 border-dashed p-1 h-24 w-24 text-center text-yellow-500">
                        喜神方位
                        <el-divider border-style="dashed" style="margin: 0px;"></el-divider>
                        <span>{{ hl.fangWei[0].split(':')[1] }}</span>
                        <img :src="getbagua(hl.fangWei[0].split(':')[1].split('=')[0])"
                            style="width: 32px;margin: 0 auto;" />
                    </div>
                </el-col>
                <el-col :span="8">
                    <div v-if="hl"
                        class="border-yellow-400 border-2 border-dashed p-1 h-24 w-24 text-center text-yellow-500">
                        福神方位
                        <el-divider border-style="dashed" style="margin: 0px;"></el-divider>
                        <span>{{ hl.fangWei[3].split(':')[1] }}</span>
                        <img :src="getbagua(hl.fangWei[3].split(':')[1].split('=')[0])"
                            style="width: 32px;margin: 0 auto;" />
                    </div>
                </el-col>
                <el-col :span="8">
                    <div v-if="hl"
                        class="border-yellow-400 border-2 border-dashed p-1 h-24 w-24 text-center text-yellow-500">
                        财神方位
                        <el-divider border-style="dashed" style="margin: 0px;"></el-divider>
                        <span>{{ hl.fangWei[4].split(':')[1] }}</span>
                        <img :src="getbagua(hl.fangWei[4].split(':')[1].split('=')[0])"
                            style="width: 32px;margin: 0 auto;" />
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div v-if="hl"
                        class="border-yellow-400 border-2 border-dashed p-1 h-24 w-24 text-center text-yellow-500">
                        阳贵神
                        <el-divider border-style="dashed" style="margin: 0px;"></el-divider>
                        <span>{{ hl.fangWei[2].split(':')[1] }}</span>
                        <img :src="getbagua(hl.fangWei[2].split(':')[1].split('=')[0])"
                            style="width: 32px;margin: 0 auto;" />
                    </div>
                </el-col>
                <el-col :span="8">
                    <div v-if="hl"
                        class="border-yellow-400 border-2 border-dashed p-1 h-24 w-24 text-center text-yellow-500">
                        日:{{ hl.fangWei[5].split(':')[1] }}
                        <el-divider border-style="dashed" style="margin: 0px;"></el-divider>
                        月:{{ hl.fangWei[6].split(':')[1] }}
                    </div>
                </el-col>
                <el-col :span="8">
                    <div v-if="hl"
                        class="border-yellow-400 border-2 border-dashed p-1 h-24 w-24 text-center text-yellow-500">
                        阴贵神
                        <el-divider border-style="dashed" style="margin: 0px;"></el-divider>
                        <span>{{ hl.fangWei[3].split(':')[1] }}</span>
                        <img :src="getbagua(hl.fangWei[3].split(':')[1].split('=')[0])"
                            style="width: 32px;margin: 0 auto;" />
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <div v-if="hl"
                        class="border-yellow-400 border-2 border-dashed p-1 h-24 w-24 text-center text-yellow-500">
                        年太岁
                        <el-divider border-style="dashed" style="margin: 0px;"></el-divider>
                        <span>{{ hl.fangWei[7].split(':')[1] }}</span>
                        <img :src="getbagua(hl.fangWei[7].split(':')[1].split('=')[0])"
                            style="width: 32px;margin: 0 auto;" />
                    </div>
                </el-col>
                <el-col :span="8">
                    <div v-if="hl"
                        class="border-yellow-400 border-2 border-dashed p-1 h-24 w-24 text-center text-yellow-500">
                        月太岁
                        <el-divider border-style="dashed" style="margin: 0px;"></el-divider>
                        <span>{{ hl.fangWei[8].split(':')[1] }}</span>
                        <img :src="getbagua(hl.fangWei[8].split(':')[1].split('=')[0])"
                            style="width: 32px;margin: 0 auto;" />
                    </div>
                </el-col>
                <el-col :span="8">
                    <div v-if="hl"
                        class="border-yellow-400 border-2 border-dashed p-1 h-24 w-24 text-center text-yellow-500">
                        日太岁
                        <el-divider border-style="dashed" style="margin: 0px;"></el-divider>
                        <span>{{ hl.fangWei[9].split(':')[1] }}</span>
                        <img :src="getbagua(hl.fangWei[9].split(':')[1].split('=')[0])"
                            style="width: 32px;margin: 0 auto;" />
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="absolute left-0  bottom-0 ">



            <el-row>
                <el-col :span="12">
                    <el-badge type="success" :value="'日宜'" class="item">
                        <div v-if="hl"
                            class="text-gray-700 float-left border-green-400 border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
                            style="width: 10vw; height: 8vh; overflow: auto;margin-top:0.5vh; border-top-right-radius: 8px;border-bottom-left-radius: 8px;">
                            <el-tag type="success" effect="dark" v-for="(o) in hl.ryilist" v-bind:key="o" class="m-0.5">
                                {{
                                    o }}
                            </el-tag>
                        </div>
                    </el-badge>
                </el-col>
                <el-col :span="12">
                    <el-badge :value="'日忌'" class="item">
                        <div v-if="hl"
                            class="text-gray-700 float-left ml-2 border-red-400 border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
                            style="width: 10vw; height: 8vh; overflow: auto;margin-top:0.5vh; border-top-right-radius: 8px;border-bottom-left-radius: 8px;">
                            <el-tag type="danger" effect="dark" v-for="(o) in hl.rjilist" v-bind:key="o" class="m-0.5">
                                {{ o }}
                            </el-tag>
                        </div>
                    </el-badge>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-badge type="success" :value="'时宜'" class="item">
                        <div v-if="hl"
                            class="text-gray-700 float-left border-green-400 border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
                            style="width: 10vw; height: 8vh; overflow: auto;margin-top:0.5vh; border-top-right-radius: 8px;border-bottom-left-radius: 8px;">
                            <el-tag type="success" effect="dark" v-for="(o) in hl.syilist" v-bind:key="o" class="m-0.5">
                                {{ o }}
                            </el-tag>
                        </div>
                    </el-badge>
                </el-col>
                <el-col :span="12">
                    <el-badge :value="'时忌'" class="item">
                        <div v-if="hl"
                            class="text-gray-700 float-left ml-2 border-red-400 border-2 border-dashed p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
                            style="width: 10vw; height: 8vh; overflow: auto;margin-top:0.5vh; border-top-right-radius: 8px;border-bottom-left-radius: 8px;">
                            <el-tag type="danger" effect="dark" v-for="(o) in hl.sjilist" v-bind:key="o" class="m-0.5">
                                {{ o }}
                            </el-tag>
                        </div>
                    </el-badge>
                </el-col>
            </el-row>
        </div>
        <div class="absolute right-0 bottom-0">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="男·大运" name="first" class="w-40">
                    <el-timeline v-if="hl">
                        <el-timeline-item v-for="(activity, index) in hl.mendaYun" :key="index" :icon="activity.icon"
                            :type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow"
                            :timestamp="activity.split('=')[1].split(' ')[1]" class="text-white">
                            {{ activity.split('=')[1].split(' ')[2] + activity.split('=')[1].split(' ')[3] }}
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>

                <el-tab-pane label="男·流年" name="sec" class="w-40">
                    <el-timeline v-if="hl">
                        <el-timeline-item v-for="(activity, index) in hl.menliuNian" :key="index" :icon="activity.icon"
                            :type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow"
                            :timestamp="activity.split('=')[1].split(' ')[1]" class="text-white">
                            {{ activity.split('=')[1].split(' ')[2] + activity.split('=')[1].split(' ')[3] }}
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>
                <el-tab-pane label="女·大运" name="first2" class="w-40">
                    <el-timeline v-if="hl">
                        <el-timeline-item v-for="(activity, index) in hl.womendaYun" :key="index" :icon="activity.icon"
                            :type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow"
                            :timestamp="activity.split('=')[1].split(' ')[1]" class="text-white">
                            {{ activity.split('=')[1].split(' ')[2] + activity.split('=')[1].split(' ')[3] }}
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>

                <el-tab-pane label="女·流年" name="sec2" class="w-40">
                    <el-timeline v-if="hl">
                        <el-timeline-item v-for="(activity, index) in hl.womenliuNian" :key="index" :icon="activity.icon"
                            size="large" :timestamp="activity.split('=')[1].split(' ')[1]" class="text-white">
                            {{ activity.split('=')[1].split(' ')[2] + activity.split('=')[1].split(' ')[3] }}
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { appWindow, WebviewWindow, LogicalSize } from "@tauri-apps/api/window";
import { emit, listen } from '@tauri-apps/api/event'
import { getClient, ResponseType } from '@tauri-apps/api/http';
export default {
    data() {
        return {
            PI: Math.PI,
            s: 0,
            i: 0,
            h: 0,
            dd: 0,
            m: 0,
            y: 0,
            w: 0,
            sr: 500,
            ir: 400,
            hr: 300,
            wr: 600,
            dr: 200,
            mr: 100,
            wk: ["日", "一", "二", "三", "四", "五", "六"],
            hl: null,
            activeName: 'first'
        };
    },

    components: {},

    computed: {},

    mounted() {
        setInterval(() => {
            var date = new Date();
            this.y = date.getFullYear();
            this.m = date.getMonth();
            this.dd = date.getDate();
            this.w = date.getDay();
            this.h = date.getHours();
            this.i = date.getMinutes();
            this.s = date.getSeconds();
            Math.cos();
        }, 1000);
        this.getDate();
        this.scheduleGetUserLocation();
    },

    created() { },

    methods: {
        getbagua(str) {
            console.log('str', str)
            if (str === "乾") {
                return new URL("../assets/svg/八卦_乾.svg", import.meta.url).href;
            }
            else if (str == "坤") {
                return new URL("../assets/svg/八卦_坤.svg", import.meta.url).href;
            }
            else if (str == "离") {
                return new URL("../assets/svg/八卦_离.svg", import.meta.url).href;
            }
            else if (str == "坎") {
                return new URL("../assets/svg/八卦_坎.svg", import.meta.url).href;
            }
            else if (str == "震") {
                return new URL("../assets/svg/八卦_震.svg", import.meta.url).href;
            }
            else if (str == "艮") {
                return new URL("../assets/svg/八卦_艮.svg", import.meta.url).href;
            }
            else if (str == "兑") {
                return new URL("../assets/svg/八卦_兑.svg", import.meta.url).href;
            }
            else if (str == "巽") {
                return new URL("../assets/svg/八卦_巽.svg", import.meta.url).href;
            }


        },
        insertNewLines(str) {
            var lines = str.split('，'); // 根据逗号和句号分割
            var line = "";
            for (var i = 0; i < lines.length; i += 4) {
                // 每四小句一行
                line += lines[i];
                if (i + 1 < lines.length) line += "，" + lines[i + 1];
                if (i + 2 < lines.length) line += "，" + lines[i + 2];
                if (i + 3 < lines.length) line += "，" + lines[i + 3];
                line += "<br>"; // 每四小句后加换行
            }
            console.log('line', line)
            return line;
        },
        scheduleGetUserLocation() {
            const now = new Date();
            const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 0, 1, 0);
            const delay = nextHour - now;

            setTimeout(() => {

                setInterval(this.getDate(), 1000 * 60 * 60);
            }, delay);
        },
        closeWin() {
            appWindow.close()
        },
        xc(r, k, l) {
            //console.log(' r * Math.cos((2 * k * this.PI) / l): ', r * Math.cos((2 * k * this.PI) / l));
            return r * Math.cos((2 * k * this.PI) / l) * 1.5;

        },
        yc(r, k, l) {
            return r * Math.sin((2 * k * this.PI) / l) * 1.5;
        },
        dg(k, l) {
            return (k * 360) / l;
        },
        zh(num, type) {
            switch (type) {
                case 1:
                    var t1 = [
                        "零",
                        "一",
                        "二",
                        "三",
                        "四",
                        "五",
                        "六",
                        "七",
                        "八",
                        "九",
                        "十"
                    ];
                    var sw = parseInt(num / 10);
                    var gw = num % 10;
                    var result = (

                        (sw != 0 ? sw == 1 ? "十" : t1[sw] + "十" : "") +
                        (gw != 0 ? t1[gw] : sw == 0 ? t1[0] : "")
                    )

                    result.replace('一十', '十')

                    //console.log('result: ', result);
                    if (result.length === 1) {


                        return result + "&nbsp;&nbsp;&nbsp;&nbsp;";
                    } else if (result.length === 2) {

                        return result.replace('&nbsp;&nbsp;&nbsp;&nbsp;', '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;').replace('', '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
                    }
                    else {
                        return result;
                    }


            }
        },
        async getDate() {
            const client = await getClient();
            const response = await client.get('https://zhangteng.cloud/5001/api/Rss/GetLunarDate', {
                timeout: 30,
                responseType: ResponseType.JSON
            });
            this.hl = response.data;
            this.hl.ryi = this.hl.yj[0].join(', ');
            this.hl.ryilist = this.hl.ryi.split(',')
            this.hl.rji = this.hl.yj[1].join(', ');
            this.hl.rjilist = this.hl.rji.split(',')
            this.hl.syi = this.hl.yj[2].join(', ');
            this.hl.syilist = this.hl.syi.split(',')
            this.hl.sji = this.hl.yj[3].join(', ');
            this.hl.sjilist = this.hl.sji.split(',')
            this.hl.mendaYun = this.hl.daYun.filter(function (item) {
                return item.startsWith("男");
            });

            this.hl.womendaYun = this.hl.daYun.filter(function (item) {
                return item.startsWith("女");
            });
            this.hl.menliuNian = this.hl.liuNian.filter(function (item) {
                return item.startsWith("男");
            });

            this.hl.womenliuNian = this.hl.liuNian.filter(function (item) {
                return item.startsWith("女");
            });
            console.log('this.hl', this.hl)
        }

    }
}

</script>
<style lang='scss' >
.el-tabs__item.is-active {
    color: #fff !important;
}

.el-tabs__active-bar {
    background-color: #8f0707;
}

.el-tabs__item:hover {
    color: #8f0707;
    cursor: pointer;
}

.el-timeline-item__content {
    color: #8f0707 !important;
    font-weight: 800;
    font-size: 1.2rem;
    text-align: center;
}

.el-timeline-item__timestamp is-bottom {
    text-align: center !important;
}

.f {
    font-family: "CustomFont";
    font-size: 18px;

}

@keyframes run {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#太极 {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    animation: run 8s infinite linear;
    box-shadow: 5px 5px 5px 5px #8f0707;
    zoom: 0.5;
    border: 2px #8f0707 solid;
}

@media (max-width: 500px) {
    #太极 {
        width: 200px;
        height: 200px;
    }
}

#太极>div:first-child {
    width: 50%;
    position: absolute;
    left: 0;
    height: 100%;
    background: black;
}

#太极>div:nth-child(2) {
    width: 50%;
    position: absolute;
    right: 0;
    height: 100%;
    background: white;
}

#太极>div:nth-child(3) {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-left: -100px;
    background: black;
    border-radius: 50%;
}

@media (max-width: 500px) {
    #太极>div:nth-child(3) {
        width: 100px;
        height: 100px;
        margin-left: -50px;
    }
}

#太极>div:nth-child(4) {
    /* border: 10px solid green; */
    position: absolute;
    width: 200px;
    height: 200px;
    right: 50%;
    bottom: 0;
    margin-right: -100px;
    background: white;
    border-radius: 50%;
}

@media (max-width: 500px) {
    #太极>div:nth-child(4) {
        width: 100px;
        height: 100px;
        margin-right: -50px;
    }
}

#太极>div:nth-child(5) {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 75px;
    margin-left: -25px;
    background: white;
    border-radius: 50%;
}

@media (max-width: 500px) {
    #太极>div:nth-child(5) {
        width: 25px;
        height: 25px;
        top: 37.5px;
        margin-left: -12.5px;
    }
}

#太极>div:nth-child(6) {
    /* border: 10px solid green; */
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    bottom: 75px;
    margin-right: -25px;
    background: black;
    border-radius: 50%;
}

@media (max-width: 500px) {
    #太极>div:nth-child(6) {
        width: 25px;
        height: 25px;
        bottom: 37.5px;
        margin-right: -12.5px;
    }
}

#太极-wrapper {
    position: absolute;


    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.s,
.i,
.h,
.w,
.d,
.m,
.y {
    position: absolute;
    padding: 0.2vw;
    width: 150px;
    text-align: center;
    top: 49%;
    left: 47%;
    transition: transform 1s;
    color: #fff;
    transform: translate(-50%, -50%);
}

.xx,
.y {
    background-color: #8f0707;
    color: #fff;
    padding: 0.2vw;
    font-size: 1vw;
    font-weight: 900;

}
</style>